<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/* 通用选择器 ：通用效果   盒模型：内外边距*/
			*{
				margin: 0;
				padding: 0;
			}
			/* 1.容器：看3D视觉效果--①宽高 ②居中 ③视觉属性 */
			.container{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				/* 视觉属性:  数值+px; 拉开距离*/
				perspective: 3000px;
				bor der: 1px solid red;	
				}
			/* 2.魔方整体：①宽高 ②指定3D坐标轴【3D效果层】③查看3D坐标轴【X、Y】④动画 */
			.box{
				width: 300px;
				height: 300px;
					/* 3D效果层：指定3D坐标轴 具备 X、Y、Z轴 */
				transform-style: preserve-3d;
				/* 倾斜：X 45deg Y 45deg，  查看3D坐标轴 */
				transform: rotateX(45deg) rotateY(45deg);
				animation: mofang 5s linear infinite;
				}
				@keyframes mofang{
				    10%{
				    transform:rotateX(adeg)rotateY(0deg);
					}
				    30%{
				    transform:rotateX(45deg)rotateY(45deg);
					}
				    50%{
				    transform:rotateX(90deg)rotateY(90deg);
					}
				    70%{
				    transform:rotateX(180deg)rotateY(180deg);
					}
				    100%{
				    transform:rotateX(360deg)rotateY(360deg);
					}
					}
				/* 3.六个面，公共属性：设定宽高，绝对定位 */ 
				.page{
					width: 300px;
					height: 300px;
						/* 绝对定位：6个面顶到一个点，定坐标轴 */
					position: absolute;
				}
				/* 3.1六个添加6个颜色 */
				.page_top{
					background-color: #e4393c;
					transform: translateZ(150px);
					background-image: url(../project/img/huangjunjie/黄1.jpg);
					background-size:100% 100%;
				}
				.page_bottom{
					background-color:#ffff00 ;
					transform: translateZ(-150px);
				    background-image: url(../project/img/huangjunjie/黄2.jpg);
					background-size:100% 100%;
				}
				.page_left{
					background-color: #0000ff;
					transform: translateX(-150px) rotateY(90deg);
					background-image: url(../project/img/huangjunjie/黄3.jpg);
					background-size:100% 100%;
				}
				.page_right{
					background-color: #55ffff;
					/* X轴 向右平移 150px 按照Y方向 旋转 90deg */
				transform: translateX(150px) rotateY(90deg);
				background-image: url(../project/img/huangjunjie/黄4.jpg);
				background-size:100% 100%;
				}
				.page_before{
					 background-color:#dc14ff;
					 		/* Y轴 向前平移 150px 按照X方向 旋转 90deg */
					transform: translateY(150px) rotateX(90deg);
					background-image: url(../project/img/huangjunjie/黄5.jpg);
					background-size:100% 100%;
				}
				.page_after{
					background-color: #ff5000;
					/* Y轴 向后平移 150px 按照X方向 旋转 90deg */
				transform: translateY(-150px) rotateX(90deg);
				background-image: url(../project/img/huangjunjie/黄6.jpg);
				background-size:100% 100%;
				}
		</style>
	</head>
	<body>
		<!-- 3D魔方   1.容器：看3D效果  2.魔方整体 3.6个面-->
		<div class="container">
			<div class="box">
				<!-- 6个面特点： ①6个面宽高一致 ②颜色不一致
					使用类选择器：多别名方式解决上述问题 
				-->
				<div class="page page_top"></div>	
				<div class="page page_bottom" ></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
		<audio src="img/语录.mp3" autoplay></audio>
	</body>
</html>